<template>
  <div class="mui-content mh-container pd">
    <mh-header headName="匹配详情"> </mh-header>
    <div class="detail-head bg-w">
      <div class="header-wrap mh-pd">
        <h4>基本资料-匹配人</h4>
        <div class="header-inner flex-bt">
          <div class="head-lt flex">
            <div class="inner-lt">
               <div class="pic-box">
                 <img :src="matchInfo.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'">
               </div>
            </div>
            <div class="inner-rt">
               <p>
                 <span class="txt-bold">{{matchInfo.nickname}}</span>
                 <span>{{matchInfo.gender==1 ? "男" : "女"}}|{{matchInfo.age}}岁|{{matchInfo.city}}</span>
               </p>
              <p>{{matchInfo.car_brand || '未填写'}}|{{matchInfo.house || '未填写'}}|{{matchInfo.income}} </p>
            </div>
          </div>
          <div class="head-rt">
            <p>老家：{{matchInfo.hometown || '未填写'}} {{matchInfo.education}}</p>
            <p>B+</p>
          </div>
        </div>
      </div>

      <div class="header-wrap mh-pd">
        <h4>基本资料-被匹配人</h4>
        <div class="header-inner flex-bt">
          <div class="head-lt flex">
            <div class="inner-lt">
               <div class="pic-box">
                 <img :src="matchInfo.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'">
               </div>
            </div>
            <div class="inner-rt">
               <p>
                 <span class="txt-bold">{{beiInfo.nickname}}</span>
                 <span>{{beiInfo.gender==1 ? "男" : "女"}}|{{beiInfo.age}}岁|{{beiInfo.city}}</span>
               </p>
              <p>{{beiInfo.car_brand || '未填写'}}|{{beiInfo.house || '未填写'}}|{{beiInfo.income}} </p>
            </div>
          </div>
          <div class="head-rt">
            <p>老家：{{beiInfo.hometown || '未填写'}} {{beiInfo.education}}</p>
            <p>B+</p>
          </div>
        </div>
      </div>

    </div>

    <div class="each-matcher bg-w">
      <h4 class="mui-text-center head-title">双方红娘</h4>
      <div class="each-avatar flex-bt">
        <div class="pic-item">
          <div class="pic-box-sm">
            <img :src="eachMatcher.hn">
          </div>
          <p>红娘</p>
        </div>

        <div class="pic-item">
          <div class="pic-box-lg">
            <img :src="matchInfo.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'">
          </div>
          <p>匹配人</p>
        </div>

        <div class="ic-each"></div>

        <div class="pic-item">
          <div class="pic-box-lg">
            <img :src="beiInfo.pic || 'https://img.gsdlcn.com/uploads/allimg/121109/1-121109214308.jpg'">
          </div>
          <p>被匹配人</p>
        </div>

        <div class="pic-item">
          <div class="pic-box-sm">
            <img :src="eachMatcher.hn">
          </div>
          <p>红娘</p>
        </div>

      </div>
    </div>

    <div class="suitability bg-w">
      <h4 class="mui-text-center head-title">匹配度</h4>
      <div class="suitability-item">
        <div class="flex">
          <span class="pros-title">体型匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="80"><span></span></p>
          <span class="pro-text">80%</span>
        </div>
        <div class="flex">
          <span class="pros-title">面相匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="99"><span></span></p>
          <span class="pro-text">99%</span>
        </div>
        <div class="flex">
          <span class="pros-title">生肖匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="60"><span></span></p>
          <span class="pro-text">60%</span>
        </div>
        <div class="flex">
          <span class="pros-title">财富匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="60"><span></span></p>
          <span class="pro-text">60%</span>
        </div>
        <div class="flex">
          <span class="pros-title">星座匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="60"><span></span></p>
          <span class="pro-text">60%</span>
        </div>
        <div class="flex">
          <span class="pros-title">综合匹配度</span>
          <p class="mui-progressbar mui-progressbar-success" :data-progress="60"><span></span></p>
          <span class="pro-text">60%</span>
        </div>
      </div>

      <div class="status-row mh-pd flex-bt">
        <span class="txt-wid txt-gray">接受状态</span>
        <span v-if='info.status==1'>已接受</span>
        <span v-if='info.status==0'>未接受</span>
        <button type="button" class="mh-btn bt-c">发送催促</button>
      </div>
      <div class="status-row mh-pd flex-bt">
        <span class="txt-wid txt-gray">后付费订单状态</span>
        <span>已下单</span>
        <button type="button" class="mh-btn bt-c">发送催促</button>
      </div>

      <div class="confirm-appointment mh-pd">
        <p>确定约会地址时间</p>
        <div class="flex input-row">
          <input class="address-input" type="text" :value="info.adddres || '未填写'" readonly>
          <button type="button" class="mh-btn bt-c">定位</button>
        </div>
        <div class="flex input-row">
          <input class="address-input" type="text" :value="info.tryst_time" readonly>
        </div>
      </div>

      <div class="appoint-res mh-pd">
        <h4>约会后结果</h4>
        <div class="each-result flex-bt">
          <div class="result-lt flex">
            <div class="pic-box pic-box-sm">
              <img :src="matchInfo.pic">
            </div>
            <span class="statis">满意</span>
          </div>
          <div class="result-rt flex">
            <div class="pic-box pic-box-sm">
              <img :src="matchInfo.pic">
            </div>
            <span class="statis">满意</span>
          </div>
        </div>
      </div>

      <div class="status-row mh-pd">
        <p class="flex-bt">
          <span>恋爱状态</span>
          <span v-if='info.tryst_status==1'>是</span>
          <span v-if='info.tryst_status==0'>否</span>
        </p>

        <p class="flex-bt">
          <span>后付费订单状态</span>
          <span v-if='info.is_payment==1'>已支付</span>
          <span v-if='info.is_payment==0'>未支付</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "match-detail",
    data () {
      return {
        matchInfo: {
          name: '用户甲',
          pic: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          sex: '女',
          age: 23,
          city: '上海长宁',
          car: '宝马',
          house: '90平米',
          career: '工程师',
          bodyType: '苗条',
          income: '8k',
          hometown: '上海',
          edu: '大学本科',
          level: 'B+'
        },
        eachMatcher: {
          hn: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          matcher: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          beMatcher: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
          beMatcherHn: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=766585699,506578438&fm=26&gp=0.jpg',
        },
        appointAddress: '台北路星巴克咖啡',
        appointTime: '2018.09.12',
        matchHong: {},
        beiInfo: {},
        beiHong: {},
        info: {}
      }
    },
    created () {
      this.$nextTick(function() {
        mui('.mui-progressbar').each(function () {
          mui(this).progressbar({progress:this.getAttribute("data-progress")}).show();
        });
      });
      let id = this.$route.query.id;
      let self = this;
      MH_API.getTrystInfo({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data;
          //匹配者
          self.matchInfo = res.data.originator[0];
          self.matchHong = res.data.originator_top[0];
          //被匹配者
          self.beiInfo = res.data.passive[0];
          self.beiHong = res.data.passive_top[0];
        }
      })
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    @include mh-avatar-box(3.1rem, 3.1rem)
  }
  .header-wrap {
    h4 {
      margin: 1rem 0;
      font-weight: bold;
      @include sc(1.4rem, #333);
    }
  }
  .txt-bold {@include sc(1.3rem, #333);}
  .detail-head {
    border-bottom: .05rem solid #eeeeee;
  }
  .pic-box-lg {@include mh-avatar-box(4.6rem, 4.6rem);}
  .pic-box-sm {@include mh-avatar-box(2.5rem, 2.5rem);}
  .each-matcher {
    padding: 1.3rem 0;
  }
  .each-avatar {
    padding: .5rem 3.5rem;
    align-items: flex-end;
  }
  .ic-each {
    width: 2.95rem;
    height: 6rem;
    background: url('../../assets/images/ico/ic_e_exchange.png') no-repeat center center;
    background-size: 2.95rem 2.35rem;
  }
  .head-title {@include sc(1.2rem, #333);}
  .mui-progressbar {
    height: .5rem;
    margin: .2rem 2rem;
    border-radius: .25rem;
  }
  .mui-progressbar span {
    background: linear-gradient(180deg, #6d43f5 0%, #c50ce7 100%);
  }
  .pros-title {
    display: inline-block;
    width: 12rem;
    @include sc(1.4rem, #333);
  }
  .suitability-item {
    padding: 1.4rem;
    &>div {padding: .7rem 0;}
  }
  .pro-text {@include sc(1.4rem, #6d43f5);}
  .bt-c {padding: .3rem .5rem;}
  .txt-wid {width: 11rem;display: inline-block;}
  input[type=text].address-input {
    width: 88%;
    margin-bottom: 0;
    margin-right: .5rem;
    height: 2.4rem;
    line-height: 2.4rem;
    background: #f2f2f2;
  }
  .input-row {margin-top: .3rem;}
  .each-result {padding: .6rem 4.6rem;}
  .appoint-res {
    h4 {@include sc(1.4rem, #333);}
    .statis {margin-left: .9rem;@include sc(1.3rem, #333);}
  }
</style>

